<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>利用递归遍历数据</title>
</head>

<body>
  <script>
    var data = [
      {
        id: 1,
        name: "家具",
        goods: [
          {
            id: 11,
            gName: "桌子",
            goods: [
              {
                id: 111,
                gName: "哈哈哈"
              }
            ]
          },
          {
            id: 12,
            gName: "椅子"
          }
        ]
      },
      {
        id: 2,
        name: "服饰",
        goods: [
          {
            id: 21,
            gName: "手镯"
          },
          {
            id: 22,
            gName: "项链"
          }
        ]
      }
    ]

    // 问: 我们想要做输入id号，就可以返回相应的数据对象
    // 1. 利用forEach去遍历里面的每一个对象
    function getId(json, id) {
      json.forEach(function (item) {
        // 遍历查询当前数组下所有元素
        // console.log(item);
        // 如果当前数组元素的id与用户输入id相等 输出当前数组元素
        if (item.id == id) {
          console.log(item);
        }
      })
    }
    // 获取id为1的对象
    getId(data, 1);

    // 问: 确实上一种函数封装的方式可以得到与传入id相等的数组子元素(对象)并且返回，但是如果我在
    // 数组子元素内找不到相对应id则让它继续往下一层子元素找，这时我们又该怎么办呢？
    // 2. 如下:
    var result = {};
    function getAllData(json, id) {
      json.forEach(function (item) {
        if (item.id == id) {
          result = item;
          return result;
        } else if (item.goods && item.goods.length > 0) {
          // 当我们在子元素下找不到对应元素id时
          // a. 先看是否有goods这个属性的数组切长度不为0 (防止异常)
          // b. 重新调用当前函数查找返回 (递归)
          getAllData(item.goods, id);
        }
      });
      return result;
    }

    // 获取id为2的数据
    // getAllData(data, 2);
    console.log(getAllData(data, 2));
    console.log(getAllData(data, 11));
    console.log(getAllData(data, 111));
  </script>
</body>

</html>